@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:20px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}
body{
    font-family:Georia,serif;
    background:#ddd;
    font-weight:bold;
    font-size:15px;
    color:#333;
    overflow: hidden;
    -webkit-font-smoothing:antialiased;
}
::-moz-selection{background-color:red}
::selection{background-color:red}
.nav>input,.nav>input+a{position:fixed;cursor:pointer;display:inline-block;width:20px;height:20px;border-radius:10px;background-color:#fff;}
.nav input{opacity:0;z-index:1000;}
.nav input+a{z-index:100}
.nav #ipt1,.nav #ipt1+a{right:8%;bottom:420px}
.nav #ipt2,.nav #ipt2+a{right:8%;bottom:390px}
.nav #ipt3,.nav #ipt3+a{right:8%;bottom:360px}
.nav #ipt4,.nav #ipt4+a{right:8%;bottom:330px}
.nav #ipt5,.nav #ipt5+a{right:8%;bottom:300px}
.nav input:checked+a:before{content:'';position:absolute;width:10px;height:10px;background-color:green;border-radius:5px;left:5px;top:5px;}/*右侧导航部分*/
#tou{margin:80px 80px 20px 0;}
#link-git{background:url(git.png) no-repeat;}
#link-gitc{background:url(gitc.png) no-repeat}
#link-youd{background:url(youdsao.png) no-repeat}
#link-email{background:url(email.png) no-repeat}
#link-jian{background:url(jianshu.png) no-repeat}
.intro-icon,.intro-text{width:1000px;margin:0 auto;}  
.intro-icon .link{display:inline-block;width:80px;height:80px;margin-right:80px;-webkit-transition:all 0.6s ease-in 0s;-o-transition:all 0.6s ease-in 0s;transition:all 0.6s ease-in 0s;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
.intro-icon .link:hover{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
.nav #ipt1:checked~.scroll #panel1 #tou{-webkit-animation:move1 1.5s ease-out 0s backwards;animation:move1 1.5s ease-out 0s backwards;}
.nav #ipt1:checked~.scroll #panel1  .icn  a{-webkit-animation:move2 1.5s ease-out 0s backwards;animation:move2 1.5s ease-out 0s backwards;}
/*中间图片部分*/
@keyframes move1{
 0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);opacity:0;
  }
 
  100%{
    -webkit-transform: translateY(0);
            transform: translateY(0);opacity:1;
  }
  }
@-webkit-keyframes move1{
 0% {
   -webkit-transform: translateY(-100px);opacity:0;
  }
 
  100%{
    -webkit-transform: translateY(0);opacity:1;
  }
  } 
@keyframes move2{
 0% {
    -webkit-transform: translateX(-800px) rotate(0deg);
            transform: translateX(-800px) rotate(0deg);opacity:0;
  }

 
  100%{
    -webkit-transform: translateX(0) rotate(1080deg);
            transform: translateX(0) rotate(1080deg);opacity:1;
  }
  } 
@-webkit-keyframes move2{
 0% {
    -webkit-transform: translateX(-800px) rotate(0deg);opacity:0;
  }

 
  100%{
    -webkit-transform: translateX(0) rotate(1080deg);opacity:1;
  }
  } 
/*文字列表部分*/


#panel1 .intro-text{padding:50px 60px 0 0}
#panel1 .intro-text li{color:#fff;font-size:20px;margin-top:20px;font-family:"微软雅黑"}
#panel1 .intro-text li a{color:#fff;}
#panel1 .intro-text li a:hover{text-decoration:underline;color:#E1FCC7;}

.nav #ipt1:checked~.scroll #panel1 .intro-text li:nth-child(1){-webkit-animation:move3 .6s ease-in 1s backwards;animation:move3 .6s ease-in 1s backwards} .nav #ipt1:checked~.scroll #panel1 .intro-text li:nth-child(2){-webkit-animation:move3 .6s ease-in 1.4s backwards;animation:move3 .6s ease-in 1.4s backwards}
#ipt1:checked~.scroll #panel1 .intro-text li:nth-child(3){-webkit-animation:move3 .6s ease-in 1.6s backwards;animation:move3 .6s ease-in 1.6s backwards}
#ipt1:checked~.scroll #panel1 .intro-text li:nth-child(4){-webkit-animation:move3 .6s ease-in 1.8s backwards;animation:move3 .6s ease-in 1.8s backwards}
#ipt1:checked~.scroll #panel1 .intro-text li:nth-child(5){-webkit-animation:move3 .6s ease-in 2.0s backwards;animation:move3 .6s ease-in 2.0s backwards}
#ipt1:checked~.scroll #panel1 .intro-text li:nth-child(6){-webkit-animation:move3 .6s ease-in 2.2s backwards;animation:move3 .6s ease-in 2.2s backwards}

@-webkit-keyframes move3{
  from{
  -webkit-transform: translate(-1000px,-300px) rotate(-60deg) ;
          transform: translate(-1000px,-300px) rotate(-60deg) ;
    }
  to{
      -webkit-transform:translate(0,0) rotate(0deg);
              transform:translate(0,0) rotate(0deg) 
    }
  }

@keyframes move3{
  from{
  -webkit-transform: translate(-1000px,-300px) rotate(-60deg) ;
          transform: translate(-1000px,-300px) rotate(-60deg) ;
    }
  to{
      -webkit-transform:translate(0,0) rotate(0deg);
              transform:translate(0,0) rotate(0deg) 
    }
  }
/*scroll部分动画*/
.scroll,.panel{width:100%;height:100%;position:relative;top:0;text-align:center;}
.panel{
    background:#fff;
    overflow: hidden;
}
#panel1{background-color:#346283}
#panel2{background-color:#2693FF}
#panel3{background-color:#FBE8D2}
#panel4{background-color:white}
#panel5{background-color:#98B7F5}

.scroll{    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;}
.nav #ipt1:checked~.scroll{-ms-transform:translateY(0);transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0)}
.nav #ipt2:checked~.scroll{-ms-transform:translateY(-100%);transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-webkit-transform:translateY(-100%)}
.nav #ipt3:checked~.scroll{-ms-transform:translateY(-200%);transform:translateY(-200%);-moz-transform:translateY(-200%);-o-transform:translateY(-200%);-webkit-transform:translateY(-200%)}
.nav #ipt4:checked~.scroll{-ms-transform:translateY(-300%);transform:translateY(-300%);-moz-transform:translateY(-300%);-o-transform:translateY(-300%);-webkit-transform:translateY(-300%)}
.nav #ipt5:checked~.scroll{-ms-transform:translateY(-400%);transform:translateY(-400%);-moz-transform:translateY(-400%);-o-transform:translateY(-400%);-webkit-transform:translateY(-400%)}
/*第二页*/
#panel2 .box1{width:1200px;height:700px;background-color:#B0B0FF;margin:20px auto;border-radius:10px;border:4px solid #FFF;position:relative;}
#panel2 .box1 .header{height:260px;width:100%;background-color:#323625;overflow:hidden;}
#panel2 .box1 .header h2{font-family:"微软雅黑";margin-top:50px;color:#FFF9DF;letter-spacing:40px;opacity:0;-webkit-transform:translateY(220px);-ms-transform:translateY(220px);transform:translateY(220px)}
#ipt2:checked~.scroll #panel2 h2{-webkit-transition:all .8s ease-out .1s;-o-transition:all .8s ease-out .1s;transition:all .8s ease-out .1s;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
#panel2 .box1 .boxImg{position:absolute;left:0;top:0;display:none;}
#panel2 .box1 .footer{padding: 50px 0 0 0;}
#panel2 .box1 .footer ul{text-align:left;width:600px;margin:0 auto;position:relative;left:80px;}
#panel2 .box1 .footer ul li{margin-bottom:50px;color:#fff;font-family:"ＤＦ中太楷書体"}
#panel2 .box1 ul .circle{display:inline-block;width:14px;height:14px;border-radius:7px;background-color:#FDCA1C;position:relative;margin-right:10px;}
#panel2 .box1 ul .line:after{content:'';display:block;width:2px;height:70px;position:absolute;top:12px;left:6px;background-color:#FDCA1C;z-index:0;border-radius:1px}
#panel2 .box1 .footer ul li .hand{-webkit-animation:show 1s ease .1s alternate infinite;animation:show 1s ease .1s alternate infinite;font-family:"微软雅黑";font-size:12px;background:url(hand.png) no-repeat;width:150px;height:20px;display:inline-block;text-indent:20px;margin-left:10px;border:none;cursor:pointer;}
#panel2 .box1 .footer ul li input[name="selectImg"]{opacity:0;}
#panel2 .box1 .footer ul li input[name="selectImg"]:checked+label{-webkit-animation-play-state:paused;animation-play-state:paused;opacity:1;}
@-webkit-keyframes show{
  from{opacity:0; }
  to{opacity:1;}
  }
@keyframes show{
  from{opacity:0; }
  to{opacity:1;}
  }
#panel2 .box1 .boxImg ul{width:100%;height:100%;position:relative;}
#panel2 .box1 .boxImg ul li{width:33.3%;height:100%;overflow:hidden;position:absolute;}
#panel2 .box1 .boxImg ul li .wrap{width:308px;height:220px;margin:20px auto;overflow:hidden;border-radius:5px;border:2px solid  #000;background-color:#8080C0}
#panel2 .box1 .boxImg ul li:nth-child(1){background:#F63;left:0;top:-100%;}
#panel2 .box1 .boxImg ul li:nth-child(2){background:#91CDFF;left:33.3%;top:-100%;}
#panel2 .box1 .boxImg ul li:nth-child(3){background:#D863BD;left:66.6%;top:-100%;}
#panel2 .box1 .boxImg ul li .wrap img{height:168px;}
#panel2 .box1 .boxImg ul li .wrap p{color:#fff;margin-top:20px;font-size:18px}
#panel2 .box1 .boxImg ul li:nth-child(1):hover img{-webkit-transition:-webkit-transform 1s ease 0s;transition:-webkit-transform 1s ease 0s;-o-transition:transform 1s ease 0s;transition:transform 1s ease 0s;transition:transform 1s ease 0s, -webkit-transform 1s ease 0s;-webkit-transform:translateX(-312px) ;-ms-transform:translateX(-312px) ;transform:translateX(-312px) ;}
#panel2 .box1 .boxImg ul li:nth-child(3):hover img{-webkit-transition:-webkit-transform 1s ease 0s;transition:-webkit-transform 1s ease 0s;-o-transition:transform 1s ease 0s;transition:transform 1s ease 0s;transition:transform 1s ease 0s, -webkit-transform 1s ease 0s;-webkit-transform:translateX(-310px) ;-ms-transform:translateX(-310px) ;transform:translateX(-310px) ;}
/*第三页*/
#panel3 .box2{margin:0 auto;height:100%;width:1200px;background:#1F22AB;overflow:hidden;}
#panel3 h2{width:100%;height:100px;font-family:"微软雅黑";margin-top:50px;color:#FFF9DF;letter-spacing:40px;-webkit-transform:translateY(220px);-ms-transform:translateY(220px);transform:translateY(220px);opacity:0;}
#ipt3:checked~.scroll #panel3 h2{-webkit-transition:all .8s ease-out .1s;-o-transition:all .8s ease-out .1s;transition:all .8s ease-out .1s;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
#panel3 .box2 ul{width:50%;padding:50px 20px 0 20px;text-align:left;float:left;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;}
#panel3 .box2 ul li{margin-bottom:50px;overflow:hidden;color:#FFF;font-size:20px;}
#panel3 .box2 ul li a{display:inline-block;width:400px;height:30px;background-color:#FFF;border-radius:10px}
#panel3 .box2 ul li a span{display:inline-block;width:300px;height:30px;background-color:red;border-radius:10px}

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
      width:80%;float:right;
      
}
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
          -o-transition: width .6s ease;
          transition: width .6s ease;
}
.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.progress-bar-success {
  background-color: #5cb85c;
}

.progress-bar-info {
  background-color: #5bc0de;
}

.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}
.ball{width:20px;height:20px;border-radius:10px;display:inline-block;background-color:#FBC535;position:absolute;}
.ball1{-webkit-animation:move4 4s ease-in-out .1s alternate infinite;animation:move4 4s ease-in-out .1s alternate infinite;}
.ball2{-webkit-animation:move5 4s ease-in-out .1s alternate infinite;animation:move5 4s ease-in-out .1s alternate infinite;}
@-webkit-keyframes move4{
  from{-webkit-transform:translateX(50px) rotate(0);transform:translateX(50px) rotate(0)}
  to{-webkit-transform:translateX(478px) rotate(1800deg);transform:translateX(478px) rotate(1800deg)}
  }
@keyframes move4{
  from{-webkit-transform:translateX(50px) rotate(0);transform:translateX(50px) rotate(0)}
  to{-webkit-transform:translateX(478px) rotate(1800deg);transform:translateX(478px) rotate(1800deg)}
  }
@-webkit-keyframes move5{
  from{-webkit-transform:translateX(478px) rotate(1800deg);transform:translateX(478px) rotate(1800deg)}
  to{-webkit-transform:translateX(50px) rotate(0);transform:translateX(50px) rotate(0)}
  }
@keyframes move5{
  from{-webkit-transform:translateX(478px) rotate(1800deg);transform:translateX(478px) rotate(1800deg)}
  to{-webkit-transform:translateX(50px) rotate(0);transform:translateX(50px) rotate(0)}
  } 
/*第四页*/
#panel4 .box3{margin:0 auto;height:100%;width:1200px;overflow:hidden;}
#panel4 h2{width:100%;height:100px;font-family:"微软雅黑";margin-top:50px;color:#6853FB;letter-spacing:40px;-webkit-transform:translateY(220px);-ms-transform:translateY(220px);transform:translateY(220px);opacity:0;}
#ipt4:checked~.scroll #panel4 h2{-webkit-transition:all .8s ease-out .1s;-o-transition:all .8s ease-out .1s;transition:all .8s ease-out .1s;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
#panel4 .box3 ul{margin:40px auto;overflow:hidden;}
#panel4 .box3 ul li{margin-left:25px;margin-top:30px;width:350px;float:left;border-radius:5px;border:5px solid #7BBDFF;overflow:hidden;position:relative;}
#panel4 .box3 ul li p{margin-top:20px;color:#8080FF}
#panel4 .box3 ul li p a:hover{text-decoration:underline;}
#panel4 .box3 ul li  .liebiao{position:absolute;-webkit-transition:-webkit-transform .8s ease-in .1s;transition:-webkit-transform .8s ease-in .1s;-o-transition:transform .8s ease-in .1s;transition:transform .8s ease-in .1s;transition:transform .8s ease-in .1s, -webkit-transform .8s ease-in .1s;-webkit-transform:translateY(-270px);-ms-transform:translateY(-270px);transform:translateY(-270px);z-index:0;}
#panel4 .box3 ul li:hover .liebiao{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
/*末页*/
#panel5 .box4{margin:0 auto;height:100%;width:1200px;overflow:hidden;position:relative;}
#panel5 .box4 p:not([class="thank"]){color:#fff;letter-spacing:40px;padding-top:100px;font-size:30px;-webkit-transform:skewX(60deg);-ms-transform:skewX(60deg);transform:skewX(60deg);opacity:0}
#ipt5:checked~.scroll #panel5 p:not([class="thank"]){-webkit-transition:all 1.5s ease-in .1s;-o-transition:all 1.5s ease-in .1s;transition:all 1.5s ease-in .1s;opacity:1;-webkit-transform:skewX(0deg);-ms-transform:skewX(0deg);transform:skewX(0deg);}
#panel5 .box4  .thank{color:#fff;letter-spacing:40px;padding-top:260px;font-size:30px;}
#panel5  .thank span{display:inline-block;}
#ipt5:checked~.scroll #panel5  .thank span:nth-child(1){-webkit-animation:move6 2s ease .1s forwards;animation:move6 2s ease .1s forwards;}
#ipt5:checked~.scroll #panel5  .thank span:nth-child(2){-webkit-animation:move6 2.4s ease .1s forwards;animation:move6 2.4s ease .1s forwards;}
#ipt5:checked~.scroll #panel5  .thank span:nth-child(3){-webkit-animation:move6 2.8s ease .1s;animation:move6 2.8s ease .1s;}
#ipt5:checked~.scroll #panel5  .thank span:nth-child(4){-webkit-animation:move6 3s ease .1s;animation:move6 3s ease .1s;}
@-webkit-keyframes move6{
  0%{-webkit-transform:translateY(-800px);transform:translateY(-800px) }
  80%{-webkit-transform:translateY(-700px);transform:translateY(-700px) }
  100%{-webkit-transform:translateY(0px));transform:translateY(0px));}
  }
@keyframes move6{
  0%{-webkit-transform:translateY(-800px);transform:translateY(-800px) }
  80%{-webkit-transform:translateY(-700px);transform:translateY(-700px) }
  100%{-webkit-transform:translateY(0px));transform:translateY(0px));}
  }
#panel5 .box4 .star{position:absolute;font-size:24px;color:#F4C946;font-weight:800;}  
#panel5 .box4 .star1{left:30px;top:30px}
#panel5 .box4 .star2{left:1170px;top:30px}
#panel5 .box4 .star3{left:1170px;top:600px}
#panel5 .box4 .star4{left:30px;top:600px}
#ipt5:checked~.scroll #panel5 .box4 .star1{-webkit-animation:move7 20s ease 1s infinite;animation:move7 20s ease 1s infinite;}
#ipt5:checked~.scroll #panel5 .box4 .star2{-webkit-animation:move8 20s ease 1s infinite;animation:move8 20s ease 1s infinite;}
#ipt5:checked~.scroll #panel5 .box4 .star3{-webkit-animation:move9 20s ease 1s infinite;animation:move9 20s ease 1s infinite;}
#ipt5:checked~.scroll #panel5 .box4 .star4{-webkit-animation:move10 20s ease 1s infinite;animation:move10 20s ease 1s infinite;}
@-webkit-keyframes move7{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  20%{-webkit-transform:translate(1140px,0);transform:translate(1140px,0)}
  25%{-webkit-transform:translate(1140px,0);transform:translate(1140px,0)}
  45%{-webkit-transform:translate(1140px,570px);transform:translate(1140px,570px)}
  50%{-webkit-transform:translate(1140px,570px);transform:translate(1140px,570px)}
  70%{-webkit-transform:translate(0px,570px);transform:translate(0px,570px)}
  75%{-webkit-transform:translate(0px,570px);transform:translate(0px,570px)}
  95%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
  100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
  }
@keyframes move7{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  20%{-webkit-transform:translate(1140px,0);transform:translate(1140px,0)}
  25%{-webkit-transform:translate(1140px,0);transform:translate(1140px,0)}
  45%{-webkit-transform:translate(1140px,570px);transform:translate(1140px,570px)}
  50%{-webkit-transform:translate(1140px,570px);transform:translate(1140px,570px)}
  70%{-webkit-transform:translate(0px,570px);transform:translate(0px,570px)}
  75%{-webkit-transform:translate(0px,570px);transform:translate(0px,570px)}
  95%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
  100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
  }
@-webkit-keyframes move8{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
  20%{-webkit-transform:translate(0,570px);transform:translate(0,570px)}
  25%{-webkit-transform:translate(0,570px);transform:translate(0,570px)}
  45%{-webkit-transform:translate(-1140px,570px);transform:translate(-1140px,570px)}
  50%{-webkit-transform:translate(-1140px,570px);transform:translate(-1140px,570px)}
  70%{-webkit-transform:translate(-1140px,0px);transform:translate(-1140px,0px)}
  75%{-webkit-transform:translate(-1140px,0px);transform:translate(-1140px,0px);}
  95%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  100%{-webkit-transform:translate(0,0);transform:translate(0,0)}
  }
@keyframes move8{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
  20%{-webkit-transform:translate(0,570px);transform:translate(0,570px)}
  25%{-webkit-transform:translate(0,570px);transform:translate(0,570px)}
  45%{-webkit-transform:translate(-1140px,570px);transform:translate(-1140px,570px)}
  50%{-webkit-transform:translate(-1140px,570px);transform:translate(-1140px,570px)}
  70%{-webkit-transform:translate(-1140px,0px);transform:translate(-1140px,0px)}
  75%{-webkit-transform:translate(-1140px,0px);transform:translate(-1140px,0px);}
  95%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  100%{-webkit-transform:translate(0,0);transform:translate(0,0)}
  }
  @-webkit-keyframes move9{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  20%{-webkit-transform:translate(-1140px,0);transform:translate(-1140px,0)}
  25%{-webkit-transform:translate(-1140px,0);transform:translate(-1140px,0)}
  45%{-webkit-transform:translate(-1140px,-570px);transform:translate(-1140px,-570px)}
  50%{-webkit-transform:translate(-1140px,-570px);transform:translate(-1140px,-570px)}
  70%{-webkit-transform:translate(0px,-570px);transform:translate(0px,-570px)}
  75%{-webkit-transform:translate(0px,-570px);transform:translate(0px,-570px)}
  95%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
  100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
  }
  @keyframes move9{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  20%{-webkit-transform:translate(-1140px,0);transform:translate(-1140px,0)}
  25%{-webkit-transform:translate(-1140px,0);transform:translate(-1140px,0)}
  45%{-webkit-transform:translate(-1140px,-570px);transform:translate(-1140px,-570px)}
  50%{-webkit-transform:translate(-1140px,-570px);transform:translate(-1140px,-570px)}
  70%{-webkit-transform:translate(0px,-570px);transform:translate(0px,-570px)}
  75%{-webkit-transform:translate(0px,-570px);transform:translate(0px,-570px)}
  95%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
  100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
  }
  @-webkit-keyframes move10{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  20%{-webkit-transform:translate(0,-570px);transform:translate(0,-570px)}
  25%{-webkit-transform:translate(0,-570px);transform:translate(0,-570px)}
  45%{-webkit-transform:translate(1140px,-570px);transform:translate(1140px,-570px)}
  50%{-webkit-transform:translate(1140px,-570px);transform:translate(1140px,-570px)}
  70%{-webkit-transform:translate(1140px,0px);transform:translate(1140px,0px)}
  75%{-webkit-transform:translate(1140px,0px);transform:translate(1140px,0px)}
  95%{-webkit-transform:translate(0,0);transform:translate(0,0)}
  100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
  }
  @keyframes move10{
  0%{-webkit-transform:translate(0,0);transform:translate(0,0) }
  20%{-webkit-transform:translate(0,-570px);transform:translate(0,-570px)}
  25%{-webkit-transform:translate(0,-570px);transform:translate(0,-570px)}
  45%{-webkit-transform:translate(1140px,-570px);transform:translate(1140px,-570px)}
  50%{-webkit-transform:translate(1140px,-570px);transform:translate(1140px,-570px)}
  70%{-webkit-transform:translate(1140px,0px);transform:translate(1140px,0px)}
  75%{-webkit-transform:translate(1140px,0px);transform:translate(1140px,0px)}
  95%{-webkit-transform:translate(0,0);transform:translate(0,0)}
  100%{-webkit-transform:translate(0,0);transform:translate(0,0);}
  }